<template>
  <div class="corporateaccount">
    <el-row>
      <el-col :span="24">
        <div class="corporateaccount-top">
          <div class="title">对公账户</div>
          <div class="tx"></div>
          <div class="c-title" v-show="active !=2">
            <el-steps :active="active" finish-status="error ">
              <el-step title="填写打款信息"></el-step>
              <el-step title="填写转账金额"></el-step>
              <el-step title="认证通过"></el-step>
            </el-steps>

            <div v-show="active == 0">
              <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="70px"
                hide-required-asterisk
                class="demo-ruleForm ruleform-hover"
              >
                <el-form-item label="开户名" prop="accountName">
                  <el-input v-model="ruleForm.accountName" disabled></el-input>
                </el-form-item>
                <el-form-item label="银行账号" prop="account">
                  <el-input
                    v-model="ruleForm.account"
                    placeholder="请输入银行账号"
                  ></el-input>
                </el-form-item>
                <el-form-item label="选择银行" prop="accountType">
                  <el-select
                    v-model="ruleForm.accountType"
                    placeholder="请选择银行"
                  >
                    <el-option label="上海银行" value="上海银行"></el-option>
                    <el-option label="平安银行" value="平安银行"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="开户地点" class="acc-site" prop="district">
                  <el-select
                    v-model="ruleForm.province"
                    placeholder="请选择"
                    @change="getDistrict"
                  >
                    <el-option label="广东" value="广东"></el-option>
                    <el-option label="湖南" value="湖南"></el-option>
                  </el-select>
                  <el-select
                    v-model="ruleForm.city"
                    :disabled="cityDis"
                    placeholder="请选择"
                    @change="getCity"
                  >
                    <el-option label="深圳" value="深圳"></el-option>
                    <el-option label="广州" value="广州"></el-option>
                  </el-select>
                  <el-select
                    v-model="ruleForm.district"
                    :disabled="districtDis"
                    placeholder="请选择"
                  >
                    <el-option label="龙岗区" value="龙岗区"></el-option>
                    <el-option label="宝安区" value="宝安区"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="支行名称" prop="subBranchName">
                  <el-input
                    v-model="ruleForm.subBranchName"
                    placeholder="请输入支行名称"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')"
                    >下一步</el-button
                  >
                </el-form-item>
              </el-form>
            </div>

            <!-- 第二部 -->
            <div class="corporateaccount-two" v-show="active == 1">
              <el-form
                :model="form"
                :rules="twoRules"
                ref="form"
                label-width="70px"
                hide-required-asterisk
                class="demo-ruleForm"
              >
                <el-form-item label="对公账号" class="t-user">
                  {{ruleForm.account}}
                </el-form-item>
                <el-form-item label="打款金额" prop="money">
                  <el-input
                    v-model="form.money"
                    placeholder="请输入金额"
                  ></el-input>
                  <span class="demo-ruleForm-text">元</span>
                </el-form-item>
                <el-form-item>
                  <div class="t-text">
                    我们会向贵司的对公银行账户提交一笔1元以下的打款申请，回填打款金额即可认证。1分钟后可重新申请打款，剩余打款次数<span
                      style="color: #e30a0d"
                      >9</span
                    >次
                  </div>
                </el-form-item>
                <el-form-item class="t9">
                  <el-button type="primary" @click="twoSubmitForm('form')"
                    >下一步</el-button
                  >
                  <el-button @click="active = 0">取消</el-button>
                </el-form-item>
              </el-form>
            </div>
            
          </div>
        </div>
        <!-- 第三步 -->
            <div class="corporateaccount-three" v-show="active == 2">
              <div>
                <div class="three-img">
                  <img src="../../../assets/home/icon_sucsess.png">
                </div>
                <div class="three-text">恭喜您，认证成功 !</div>
                <div><el-button @click="checkAuthentication">查看认证信息</el-button></div>
              </div>
            </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0, //步骤条
      ruleForm: {
        accountName: "海富德实业投资（深圳）集团有限公司", //名称
        account: "", //银行账号
        accountType: "", //选择银行
        subBranchName: "", //支行名称
        district: "", //开户地点
        province: "", //省
        city: "", //市
        district: "", //区
      },
      form: {
        money: "", //金额
      },
      initData:'',
      cityDis: true, //是否禁用市级
      districtDis: true, //是否禁用区级
      rules: {
        account: [
          { required: true, message: "请输入银行账号", trigger: "blur" },
        ],
        subBranchName: [
          { required: true, message: "请输入支行名称", trigger: "blur" },
        ],
        accountType: [
          { required: true, message: "请选择银行", trigger: "change" },
        ],
        district: [
          { required: true, message: "请选择省市区", trigger: "change" },
        ],
      },
      twoRules: {
        money: [{ required: true, message: "请输入金额", trigger: "blur" }],
      },
    };
  },
  mounted(){
    this.initData = this.$route.params
   console.log(this.initData,'传递过来的参数')
  },
  methods: {
    //第一步验证
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submit();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //第一步确认
    submit() {
      this.active = 1;
    },
    twoSubmit(){
      this.active = 2
    },
    //第二部验证
    twoSubmitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.twoSubmit()
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //认证成功查看
    checkAuthentication(){
      this.$router.push({name:'authentication',params:{initData:this.initData,oldData:this.ruleForm,money:this.form.money}})
    },
    //省失去焦点
    getDistrict() {
      if (this.ruleForm.province) {
        this.cityDis = false;
        this.ruleForm.district = "";
        this.districtDis = true;
      }
    },
    //市失去焦点
    getCity() {
      if (this.ruleForm.city) {
        this.districtDis = false;
      }
    },
  },
};
</script>

<style>
</style>